TypeScript 進階：函式重載與 this

2024 iThome 鐵人賽

DAY 12

JavaScript

TypeScript 完全指南：從語法基礎到高級功能的系統學習系列第 12 篇

16th鐵人賽 typescript function this

Mao

團隊Side Project Taiwan

2024-09-13 23:52:40

77 瀏覽

分享至

cover

前言

在 JavaScript 裡，沒有內建的函式重載（Function Overloading）功能，但在 TypeScript 中，我們可以透過型別註解來模擬此功能。此外，this 是 JavaScript 中常見且具挑戰性的概念，透過 TypeScript 可以更安全地控制 this 的行為。

什麼是函式重載？

函式重載（Function Overloading）是指在相同函式名稱下，可以定義多個具有不同參數組合的函式。利用函式簽名（function signatures）來模擬函式重載，並且在編譯時提供型別檢查，以確保函式在不同的參數組合下能夠正確運行。

為什麼需要函式重載？

函式重載允許我們針對不同的輸入提供不同的邏輯，提升函式的靈活性和可讀性。

如果沒有使用函式重載，就會自動推斷最兼容回傳的型別。

function getOneYearAgo(date: Date | string) {
    const _date = new Date(date);

    _date.setFullYear(_date.getFullYear() - 1);

    if (typeof date === "string") {
        return _date.toLocaleDateString();
    }
    return _date;
}

// date1 和 date2 都推斷為 string | Date
const date1 = getOneYearAgo(new Date());
const date2 = getOneYearAgo("2024-01-01");

但如果使用函式重載，就能根據傳遞的參數來進行匹配，就能更精準的回傳型別

function getOneYearAgo(date: string): string;
function getOneYearAgo(date: Date): Date;
function getOneYearAgo(date: Date | string) {
    const _date = new Date(date);

    _date.setFullYear(_date.getFullYear() - 1);

    if (typeof date === "string") {
        return _date.toLocaleDateString();
    }
    return _date;
}

const date1 = getOneYearAgo(new Date()); // date1 推斷為 Date
const date2 = getOneYearAgo("2024-01-01"); // date2 推斷為 string

this

this 是 JavaScript 和 TypeScript 中非常核心且常見的概念，它代表函式執行時的上下文。理解 this 的行為對寫出正確的程式碼至關重要，而 TypeScript 提供了額外的提示來幫助我們避免開發時遇到的 this 錯誤。

this 的值取決於函式的呼叫方式。以下是常見的 this 綁定場景：

全域範圍/函式範圍中的普通函式

在非嚴格模式下，this 指向全域物件（window 在瀏覽器中，node 在後端環境）。在嚴格模式下，this 則為 undefined。

// 沒有嚴格模式瀏覽器中，在全域範圍中，指向 window
console.log(this);

物件方法中的普通函式

當普通函式作為物件的方法被呼叫時，this 會指向該物件。

const person = {
    name: 'Johnson Mao',
    greet() {
        console.log(this.name);
    }
};

person.greet(); // "Johnson Mao" - this 指向 person 物件

構造函式/類別中的普通函式

當使用 new 關鍵字調用普通函式時，this 會指向新建的物件實例。

class Person {
    constructor(public name: string) {}

    greet() {
        console.log(this.name);
    }
}

const person = new Person('Alice');
person.greet(); // "Johnson Mao" - this 指向實例化的 person 物件

箭頭函式中

箭頭函式沒有自己的 this，它會捕捉並繼承定義時的上下文 this，這在處理回調或非同步操作中特別有用。

const person = {
    name: 'Johnson Mao',
    greet: () => {
        // 這裡的 this，是外部作用域的 this，而非 person 物件
        console.log(this.name);
    }
};

person.greet(); // undefined，因為 this 指向全域物件